vvvv
<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { PaginationProps } from "@pureadmin/table";
import { computed, onMounted, reactive, ref } from "vue";
import { getDataBySQLDesc } from "@/api/common";
import { useDictionary } from "@/hooks/useDictionary";
import { log } from "node:console";
defineOptions({
  name: "DeliveryAndExpeditedNumber"
});
// 使用局部混入



const searchForm = ref();
const dicData = ref([]);
const supplierOptions = computed(() => {
  return dicData.value.map(item => item.代码值);
});


const option = ref({
  tooltip: {
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // point: 鼠标位置，格式为 [x, y]
      // params: 提示框所包含的数据信息
      // dom: 提示框的 DOM 元素
      // rect: 鼠标所在图形的包围盒，格式为 {x, y, width, height}
      // size: 提示框的大小，格式为 {contentSize: [width, height], outerSize: [width, height]}
      return [point[0] - 50, point[1] - 50]; // 设置提示框在鼠标上方 20px 处
    },
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999"
      }
    }
  },
  legend: {
    type: "scroll",
    data: [], // 从 supplierOptions 中获取标签
  },
  xAxis: [
    {
      type: "category",
      data: [],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value}"
      }
    }
  ],
  series: [
    {
      name: '',
      type: "bar",
      stack: "一般",
      yAxisIndex: 0,
      label: {
        show: true
      },
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    },
    {
      name: '',
      type: "bar",
      stack: "一般",
      yAxisIndex: 0,
      label: {
        show: true
      },
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    },
    {
      name: '',
      type: "bar",
      stack: "一般",
      yAxisIndex: 0,
      label: {
        show: true
      },
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: []
    }
  ]
});
const form = ref({
  action: "biz/reports/qulityanalysis",
  description: "品质-不合格原因分析",
  provider: "杭州多乐信电气有限公司",
  start: "2014-07-15 00:00:00",
  end: "2025-07-15 00:00:00",
  shshnd: "",
});
const searchColumns = computed<PlusColumn[]>(() => [

  {
    label: "年份",
    prop: "shshnd",

    valueType: "date-picker",
    fieldProps: {
      type: "year",
      valueFormat: "YYYY",
      placeholder: "请选择年份"
    }
  }
]);
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const handleChange = () => { };
const handleSearch = async () => {
  getChartsData()
};
// 获取请购紧急度
const getqgjjd = async () => {
  const { data } = await getDataBySQLDesc({
    action: "public/get_xtcs_qgjjd",
  });
  dicData.value = data
  console.log(supplierOptions.value);

  getTime()


}
// 获取年份
const getTime = async () => {
  const { data } = await getDataBySQLDesc({ action: "public/get_server_sysdate" });
  form.value.shshnd = data[0].年

  getChartsData()
  // getTableData()

}
const getChartsData = async () => {
  let params = {
    action: "biz/reports/get_iqc_dljcfx",
    shshnd: form.value.shshnd,
  }
  const { data } = await getDataBySQLDesc(params);
  let list = []
  data.map(item => {
    let obj = list.find(i => i.收货审核月份 == item.收货审核月份)
    if (!obj) {
      obj = {}
      obj.收货审核月份 = item.收货审核月份
      obj[supplierOptions.value[0]] = item.紧急度 == supplierOptions.value[0] ? Number(item.到料数量) : 0,
        obj[supplierOptions.value[1]] = item.紧急度 == supplierOptions.value[1] ? Number(item.到料数量) : 0,
        obj[supplierOptions.value[2]] = item.紧急度 == supplierOptions.value[2] ? Number(item.到料数量) : 0,

        list.push(obj)
    } else {
      if (item.紧急度 == supplierOptions.value[0]) {
        obj[supplierOptions.value[0]] = Number(item.到料数量)
      }
      else if (item.紧急度 == supplierOptions.value[1]) {
        obj[supplierOptions.value[1]] = Number(item.到料数量)
      }
      else if (item.紧急度 == supplierOptions.value[2]) {
        obj[supplierOptions.value[2]] = Number(item.到料数量)
      }


    }
  })

  option.value.xAxis[0].data = list.map(item => item.收货审核月份);

  option.value.legend.data = supplierOptions.value;
  option.value.series[0].name = supplierOptions.value[0];
  option.value.series[1].name = supplierOptions.value[1];
  option.value.series[2].name = supplierOptions.value[2];
  option.value.series[0].stack = supplierOptions.value[0];
  option.value.series[1].stack = supplierOptions.value[0];
  option.value.series[2].stack = supplierOptions.value[0];
  option.value.series[0].data = list.map(item => item[supplierOptions.value[0]]);
  option.value.series[1].data = list.map(item => item[supplierOptions.value[1]]);
  option.value.series[2].data = list.map(item => item[supplierOptions.value[2]]);




}
const handleRest = () => { getTime() };
onMounted(() => {
  getqgjjd();

});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="80" label-position="right" @change="handleChange"
        @search="handleSearch" @reset="handleRest" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="chart bar-chart">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>
